<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:20px;height:20px;background: #000;color: #fff;text-align: center;line-height: 20px;position: absolute;left:0;top:0;}
  </style>
</head>
<body>
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</body>
<script>
  
  var box = document.querySelectorAll(".box");

  document.onmousemove = function(eve){
    var e = eve || window.event;

    // 从最后一个元素开始，依次设置为前一个元素的位置
    for(var i=box.length-1;i>0;i--){
      box[i].style.left = getStyle(box[i-1], "left");
      box[i].style.top = getStyle(box[i-1], "top");
    }
    // 最后在操作第0个元素，跟着鼠标的走
    box[0].style.left = e.pageX + "px";
    box[0].style.top = e.pageY + "px";
  }

  // 7个人，蒙上眼睛堵上嘴绑住手
  // 初始站成一排

  // 问在保持队列不变的情况下如何才能向前移动

  // 第6个跟第5个走
  // 第5个跟第4个走
  // 第4个跟第3个走
  // 第3个跟第2个走
  // 第2个跟第1个走
  // 第1个跟第0个走
  // 第0个跟鼠标走



  function getStyle(ele, attr){
    return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
  }


</script>
</html>